<template>
  <div class="header">
    <GlobalHeader :user="currentUser"></GlobalHeader>
  </div>
  <div class="container" v-if="false">
    <ColumnList :list="list"></ColumnList>
  </div>

  <div class="container">
    <form action="">
      <div class="mb-1">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <ValidInput :rules="emailRules" placeholder="请输入邮箱地址"></ValidInput>
      </div>
      <div class="mb-1">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <ValidInput placeholder="请输入密码" :rules="passwordRules"></ValidInput>
      </div>
    </form>

    <hr>
    <ValidForm @form-submit="onFormSubmit">
      <div class="mb-1">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <ValidInput placeholder="请输入密码" :rules="passwordRules" ref="inputRef"></ValidInput>
      </div>
      <template #submit>
        <button type="submit" class="btn btn-primary" style="width: 100%">提交</button>
      </template>
    </ValidForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ValidInput, { RulesProp } from './components/ValidInput.vue'
import ValidForm from './components/ValidForm.vue'

const testData: ColumnProps[] = [
  {
    id: 1,
    title: '铺先生',
    description: '酒店售货机，酒店经营，共享经济，新零售，共享数据线，关注灵趣科技，了解更多',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e41a8b7d9c60b68cdd1ec.jpg'
  },
  {
    id: 2,
    title: 'Vehicle攻城狮',
    description: '半吊子系统和程序狗，沉迷高端理论，日渐消瘦。',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg'
  },
  {
    id: 3,
    title: '爱生活爱眼睛',
    description: '愿你有一颗热爱生活的心和一双不老的眼睛！'
    // avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
  },
  {
    id: 4,
    title: '自然语言处理训练营',
    description: '自然语言处理，机器学习相关学习材料',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e41b8b7d9c60b68cdd1ef.jpg'
  }
]
const currentUser: UserProps = {
  isLogin: true,
  name: 'Jetwang'
}
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHeader,
    ValidInput,
    ValidForm
  },
  setup () {
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]

    const passwordRules: RulesProp = [
      { type: 'required', message: '密码不能为空' }
    ]

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const inputRef = ref<any>()

    const onFormSubmit = (result: boolean) => {
      console.log(result)
    }

    return {
      list: testData,
      currentUser: currentUser,
      emailRules,
      passwordRules,
      onFormSubmit,
      inputRef
    }
  }
})
</script>

<style>
.header {
  width: 100%;
  background-color: #0d6efd;
}
.form-label {
  color: #5d5d5d !important;
}

.form-control::placeholder {
  font-size: 16px;
}
</style>
